<!doctype html>
<html lang="zh-MO">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="您的澳門（zh-MO）網站範本 — 簡潔、響應式、易於本地化。">
  <title>我的網站 — 澳門 (zh‑MO)</title>
  <style>
    :root{--bg:#f8f9fb;--card:#fff;--accent:#0066cc;--muted:#666}
    *{box-sizing:border-box}
    body{margin:0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Helvetica Neue', Arial, sans-serif;background:var(--bg);color:#121212;line-height:1.6}
    .container{max-width:1100px;margin:0 auto;padding:24px}
    header{background:linear-gradient(90deg,#ffffffcc,#f0f4ffcc);backdrop-filter:blur(4px);padding:18px 0}
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:56px;height:56px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
    nav{margin-left:auto}
    nav a{margin-left:14px;text-decoration:none;color:var(--muted);font-weight:600}
    .hero{display:flex;flex-direction:column;gap:12px;padding:48px 0}
    .hero h1{margin:0;font-size:clamp(28px,4vw,44px)}
    .card{background:var(--card);padding:18px;border-radius:12px;box-shadow:0 6px 18px rgba(20,30,60,0.06)}
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
    footer{padding:24px 0;color:var(--muted);font-size:14px}
    .btn{display:inline-block;padding:10px 16px;border-radius:8px;text-decoration:none;color:#fff;background:var(--accent)}
    @media(min-width:800px){.hero{flex-direction:row;align-items:center;justify-content:space-between}}
  </style>
</head>
<body>
  <header class="card">
    <div class="container" style="display:flex;align-items:center;">
      <div class="brand">
        <div class="logo">澳</div>
        <div>
          <div style="font-weight:800">我的網站</div>
          <div style="font-size:13px;color:var(--muted)">為澳門（zh‑MO）本地化範本</div>
        </div>
      </div>
      <nav>
        <a href="#about">關於</a>
        <a href="#services">服務</a>
        <a href="#contact">聯絡</a>
      </nav>
    </div>
  </header>

  <main class="container">
    <section class="hero">
      <div>
        <h1>歡迎來到您的澳門網站範本</h1>
        <p style="color:var(--muted);max-width:60ch">這是一個以 zh‑MO（澳門）語系作為預設的簡潔 HTML 範本。您可以使用繁體中文文字，加入澳門本地資訊（如地址、營業時間、貨幣說明等），或套用葡語元素以符合雙語環境。</p>
        <p style="margin-top:12px"><a class="btn" href="#contact">立即聯絡</a></p>
      </div>
      <div style="min-width:240px;max-width:420px">
        <div class="card">
          <h3 style="margin-top:0">快速資訊</h3>
          <ul style="margin:6px 0 0 18px;color:var(--muted)">
            <li>語言：繁體中文（zh‑MO）</li>
            <li>貨幣：澳門幣（MOP）</li>
            <li>格式：24小時制、日/月/年</li>
          </ul>
        </div>
      </div>
    </section>

    <section id="about" style="margin-top:18px">
      <div class="card">
        <h2>關於我們</h2>
        <p style="color:var(--muted)">在此放置您公司的簡介 — 歷史、服務特色與本地連結（例如：氹仔、媽閣廟、旅遊或法規資訊）。建議提供中葡雙語的摘要讓更多訪客理解。</p>
      </div>
    </section>

    <section id="services" style="margin-top:16px">
      <div class="grid">
        <div class="card">
          <h3>服務一</h3>
          <p style="color:var(--muted)">服務說明：可針對澳門市場做在地化調整。</p>
        </div>
        <div class="card">
          <h3>服務二</h3>
          <p style="color:var(--muted)">服務說明：支援繁體中文與葡文內容發佈。</p>
        </div>
        <div class="card">
          <h3>服務三</h3>
          <p style="color:var(--muted)">服務說明：移動裝置與桌面皆自適應。</p>
        </div>
      </div>
    </section>

    <section id="contact" style="margin-top:18px">
      <div class="card">
        <h2>聯絡我們</h2>
        <p style="color:var(--muted)">地址範例：澳門半島 例子街 123 號<br>電話：+853 1234 5678<br>電郵：info@example.com</p>
        <form onsubmit="handleSubmit(event)" style="display:grid;gap:8px;max-width:560px">
          <input name="name" placeholder="姓名" required style="padding:10px;border-radius:8px;border:1px solid #e6e9ef">
          <input name="email" type="email" placeholder="電郵" required style="padding:10px;border-radius:8px;border:1px solid #e6e9ef">
          <textarea name="message" rows="4" placeholder="訊息" required style="padding:10px;border-radius:8px;border:1px solid #e6e9ef"></textarea>
          <div style="display:flex;gap:8px;align-items:center">
            <button class="btn" type="submit">送出</button>
            <div style="color:var(--muted);font-size:13px">我們會在 2 個工作天內回覆。</div>
          </div>
        </form>
      </div>
    </section>

  </main>

  <footer class="container">
    <div style="display:flex;justify-content:space-between;align-items:center;gap:12px">
      <div>© <span id="year"></span> 我的網站 — 澳門</div>
      <div style="color:var(--muted);font-size:13px">語言：繁體中文（zh‑MO） | 設計範本</div>
    </div>
  </footer>

  <script>
    document.getElementById('year').textContent = new Date().getFullYear();
    function handleSubmit(e){
      e.preventDefault();
      alert('已送出 — 我已收到您的訊息（範本行為）');
      e.target.reset();
    }
  </script>
</body>
</html>
